import React from 'react'
//import Api from "../../utils/model";
import './index.css';
import { Tabs, Button, message } from 'antd';

const { TabPane } = Tabs;


export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      tabType: 1,
      phone: '',
      password: '',
      vercode: '',
      phoneNumber: '',
      phoneVercode: '',
      delaySwitch: false,
      delayText: ''
    }
  }
  componentDidMount() {
    console.log(this.state.verifyImg)
    document.addEventListener('keydown', this.handleKeyDown);
  }
  componentWillUnmount() {
    document.removeEventListener('keydown', this.handleKeyDown);
  }
  callback = (key) => {
    this.setState({ tabType: key });
  }
  _changeValue(e) {
    this.setState({
      [e.target.name]: e.target.value
    })
  }
  verifyCode = (e) => {
  }
  getPhoneVercode = () => {
    let _this = this



  }
  handleKeyDown=(e)=> {
    var _this =this;
    if (e.keyCode == 13) {
      _this.login()
      //事件操作
    }
  }
  login = (e) => {
    let loginData = {}
    console.log(this.state)
    if (this.state.tabType == 1) {
      loginData = { phone: this.state.phone, password: this.state.password, vercode: this.state.vercode }
    }


  }
  render() {
    console.log(this.state.verifyImg)
    return (
      <div className="Login">
        <div className="FormWrap">
          <h1>欢迎登录 Demo</h1>
          <div className="FormLogin">
            <div className="TabLogin">
              <Tabs defaultActiveKey="1" size="large" centered="true" onChange={this.callback}>
                <TabPane tab="用户登录" key="1">
                  <div className="Label user"><input type="text" name="phone" onChange={this._changeValue.bind(this)} placeholder="请输入手机号" /></div>
                  <div className="Label password"><input type="password" name="password" onChange={this._changeValue.bind(this)} placeholder="请输入密码" /></div>
                  <div className="Label vercode"><input type="text" name="vercode" onChange={this._changeValue.bind(this)} placeholder="请输入验证码" /></div>
                  <button className="LoginBtn" onClick={() => { this.login() }}>登 录</button>
                </TabPane>
                <TabPane tab="手机登录" key="2" className="phoneLogin">
                  <div className="Label"><input type="text" name="phoneNumber" onChange={this._changeValue.bind(this)} placeholder="请输入您的手机号" /></div>
                  <div className="Label phoneVercode">
                    <input type="text" name="phoneVercode" onChange={this._changeValue.bind(this)} placeholder="短信验证码" />
                    {this.state.delaySwitch ? (<Button type="text">{this.state.delayText}</Button>) : <Button type="link" onClick={() => { this.getPhoneVercode() }}>发送验证码</Button>}

                  </div>
                  <button className="LoginBtn" onClick={() => { this.login() }} onKeyDown={(e)=>this.handleKeyDown(e)}>登 录</button>
                </TabPane>
              </Tabs>
            </div>
          </div>
        </div>
        <div className="Copyright">Copyright 沪ICP备16022139号-5 当前版本：V 3.6.3（正式版）    </div>
      </div>
    );
  }
}

